<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>调色器</title>
        <!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.common.min.js"></script> -->
        <link rel="stylesheet" href="./index.css" />
    </head>
    <body>
        <button id="openBtn" style="margin: 100px 120px 150px 200px">打开调色器</button>
        <div id="colorPickerPanel">
            <div id="quickColorsContainer"></div>
            <div id="pickerContainer">
                <div id="mainColor">
                    <div class="bg bg1"></div>
                    <div class="bg bg2"></div>
                    <div id="selector"></div>
                </div>
                <div class="barOuter">
                    <div class="barContainer">
                        <div id="colorBar" class="bar">
                            <div id="colorSlider" class="slider"></div>
                        </div>
                        <div class="bar alphaUnderColor">
                            <div id="alphaBar"></div>
                            <div id="alphaSlider" class="slider"></div>
                        </div>
                    </div>
                    <div class="resultPreview alphaUnderColor">
                        <div id="resultPreview"></div>
                    </div>
                </div>
            </div>
            <div class="operate">
                <select name="colorType" id="colorTypeSelect">
                    <option value="hex">HEX</option>
                    <option value="rgb">RGB</option>
                </select>
                <div class="resultContainer">
                    <div id="hexContainer">
                        <input id="hexInput" type="text" />
                    </div>
                    <div id="rgbContainer" style="display: none">
                        <input id="RInput" type="text" />
                        <input id="GInput" type="text" />
                        <input id="BInput" type="text" />
                    </div>
                    <input id="opacityInput" type="text" />
                </div>
            </div>
        </div>
    </body>
    <script type="module" src="./index.js"></script>
</html>
